import {Modal, Form, Input, Radio, Button, Cascader, Select,message} from 'antd';
import type { RadioChangeEvent } from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import UserInfoImages from '../userInfo/UserInfoImages'
import  { findP } from '../../utils/treeUtils'
import '../../assets/css/UserInfoImg.css'
import {getBuildingList} from "../../apis/building";
import {getUserType,getUserAdd} from "../../apis/userinfo";
import {getHousesList} from '../../apis/houses'
const { Option } = Select;
const RepairsAdd=(props:any)=> {
    const [confirmLoading,] = useState(false);
    const [modalImg, setModalImg] = useState('');
    //修改
    const listEdit = useRef<any>()
    //楼栋id
    const [options,setOptions]: any =useState([]);
    //楼栋列表
    const getBuildinglist = async ()=>{
        const res:any = await getBuildingList({}).catch()
        if(res&&res.errCode===10000){
            setOptions(res.data.list)
            const aa = await findP(props.listData.buildingid,res.data.list)
            listEdit.current.setFieldsValue({buildingid:aa})
        }
    }
    //居民类型
    const [selectList,getSelectList] = useState([])
    const getTypeList = async ()=>{
        const res:any = await getUserType({}).catch()
        if(res&&res.errCode===10000){
            getSelectList(res.data.list)
        }
    }
    //房间号
    const [house,getHouse] = useState([])
    const obtainHouse = (val:any)=>{
        if(val){
            getHouses(val)
        }
    }
    const getHouses = async(id:any)=>{
        const res:any = await getHousesList({buildingid:id[id.length-1]}).catch()
        if(res&&res.errCode===10000){
            getHouse(res.data.list)
        }
    }
    const [params,setParams]:any = useState({})
    const onFinish = async(values: any) => {
        const res:any = await getUserAdd({...values,id:props.listData.id, photo:modalImg,buildingid:values.buildingid[values.buildingid.length-1]}).catch()
        if(res&&res.errCode===10000){
            props.getUserClose()
            message.success('添加成功');
        }else{
            message.success(res.errMsg);
        }
    };
    //图片
    const handleCancel = () => {
        props.getUserClose()
    };
    const [value, setValue] = useState(1);
    const obtainImg = (val:any)=>{
        setModalImg(val)
    }
    const getOut = ()=>{
        props.getUserClose()
    }
    const onChange = (e: RadioChangeEvent) => {
        setValue(e.target.value);
    };
    //修改

    useEffect(()=>{
        if(props.listData.buildingid) getHouses(props.listData.buildingid)
        listEdit.current.setFieldsValue(props.listData)
    },[])
    useEffect(()=>{

        if(props.listData.id){
            setModalImg(props.listData.photo)
        }
        getBuildinglist()
        getTypeList()
    },[params])
    return (
        <>
            <Modal
                title={props.listData.id?'修改':'添加'}
                open={props.addShow}
                width="40%"
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <Form ref={listEdit} onFinish={onFinish}  labelCol={{ span: 8 }} >
                    <div style={{ display:"flex",justifyContent:"space-between"}}>
                        <div style={{width:'45%'}}>
                            <Form.Item
                                label="头像"
                                name="photo"
                                style={{textAlign:'center'}}
                            >
                                <UserInfoImages urlpass={props.listData.photo?props.listData.photo:''} obtainImg={obtainImg}></UserInfoImages>
                            </Form.Item>
                            <Form.Item
                                name="buildingid"
                                label="楼栋"
                                rules={[{ required: true, message: '请选择楼栋' }]}
                            >
                                <Cascader
                                    style={{width: '200px'}}
                                    changeOnSelect
                                    fieldNames={{ label: 'name', value: 'id', children: 'children' }}
                                    options={options}
                                    onChange={obtainHouse}
                                    expandTrigger="hover"
                                    placeholder="请选择"
                                />
                            </Form.Item>
                            <Form.Item
                                name="houseid"
                                label="房间号"
                                rules={[{ required: true, message: '请选择房间号' }]}
                            >
                                <Select placeholder="请选择">
                                    {
                                        house.map((item: any) => (
                                            <Option value={item.id} key={item.id}>{item.houseno}</Option>
                                        ))
                                    }
                                </Select>

                            </Form.Item>
                            <Form.Item
                                name="name"
                                label="姓名"
                                rules={[{ required: true, message: '请输入姓名' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                name="sex"
                                label="性别"
                                rules={[{ required: true, message: '请选择性别' }]}
                            >
                                <Radio.Group onChange={onChange} value={value}>
                                    <Radio value={1}>男</Radio>
                                    <Radio value={0}>女</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </div>
                        <div className="formRight">
                            <Form.Item
                                label="民族"
                                name="nation"
                                rules={[{ required: true, message: '请输入民族' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="籍贯"
                                name="usernative"
                                rules={[{ required: true, message: '请输入籍贯' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="身份证号"
                                name="cardid"
                                rules={[{ required: true, message: '请输入身份证号' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="联系电话"
                                name="mobile"
                                rules={[{ required: true, message: '请输入联系电话' },{ required: true,max:11,min:11, message: '输入正确的手机号' }]}
                            >
                                <Input maxLength={11} />
                            </Form.Item>
                            <Form.Item
                                label="住户类型"
                                name="usertype"
                                rules={[{ required: true, message: '请输入住户类型' }]}
                            >
                                <Select
                                    placeholder="请选择"
                                    optionFilterProp="children"
                                    fieldNames={{label: 'name',value:'id'}}
                                    options={selectList}
                                />
                            </Form.Item>
                        </div>
                    </div>
                    <Form.Item style={{textAlign:"center"}}>
                        <Button type="primary" htmlType="submit">确定</Button>
                        <Button style={{marginLeft:'10px'}} onClick={getOut}>取消</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
}

export default RepairsAdd;
